<template>
  <div class="dashboard-editor-container">
    <panel-group :panelList.sync="panelList" />
    <el-row :gutter="32" style="margin-top: 10px">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <QYPieChart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <GRPieChart />
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px; background-color: #fff">
      <RegisterLineChat :registerList="registerList" />
    </el-row>
    <el-row style="margin-top: 10px; background-color: #fff">
      <LivenessLineChat :selSystemDataActiveList="selSystemDataActiveList" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import QYPieChart from "./components/QY_PieChart";
import RegisterLineChat from "./components/register_LineChat";
import LivenessLineChat from "./components/liveness_LineChat";
import GRPieChart from "./components/GR_PieChart";
import {
  selSystemDataActiveApi,
  selSystemDataAddApi,
  selSystemDataTopApi,
} from "@/api/portrait";
export default {
  name: "",
  components: {
    PanelGroup,
    QYPieChart,
    GRPieChart,
    RegisterLineChat,
    LivenessLineChat,
  },
  data() {
    return {
      panelList: {},
      registerList: [],
      selSystemDataActiveList: [],
    };
  },
  created() {
    this.selSystemDataTop();
    this.selSystemDataAdd();
    this.selSystemDataActive();
  },
  methods: {
    // 画像顶部
    async selSystemDataTop() {
      try {
        const res = await selSystemDataTopApi();
        console.log(res);
        this.panelList = res.data;
        console.log(this.panelList);
      } catch {}
    },
    // 注册量趋势
    async selSystemDataAdd() {
      try {
        const res = await selSystemDataAddApi();
        console.log(res);
        this.registerList = res.data;
      } catch {
        this.$message.error("获取注册量趋势失败");
      }
    },
    // 活跃度分析
    async selSystemDataActive() {
      try {
        const res = await selSystemDataActiveApi();
        console.log(res);
        this.selSystemDataActiveList = res.data;
      } catch {
        this.$message.error("获取活跃度分析失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  padding: 20px;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
